<div class="workflow-tasks-container">
  <!-- 顶部工具栏 -->
  <div class="toolbar">
    <div class="toolbar-left">
      <h2><i class="fas fa-tasks"></i> 工作流任务管理</h2>
    </div>
    <div class="toolbar-right">
      <!-- 用户角色切换 -->
      <div class="role-switcher">
        <label>当前角色：</label>
        <select (change)="onRoleChange($event)" [value]="currentUser?.role">
          <option [value]="UserRole.TECHNICIAN">{{ getRoleDisplayName(UserRole.TECHNICIAN) }}</option>
          <option [value]="UserRole.ADMIN">{{ getRoleDisplayName(UserRole.ADMIN) }}</option>
        </select>
      </div>
      <button class="btn btn-primary" (click)="createNewRequest()">
        <i class="fas fa-plus"></i>
        新建维修申请
      </button>
    </div>
  </div>

  <!-- 用户信息 -->
  <div class="user-info" *ngIf="currentUser">
    <div class="user-card">
      <div class="user-avatar">
        <i class="fas fa-user"></i>
      </div>
      <div class="user-details">
        <h4>{{ currentUser.fullName }}</h4>
        <p>{{ getRoleDisplayName(currentUser.role) }} | {{ currentUser.department }}</p>
        <p>{{ currentUser.email }}</p>
      </div>
    </div>
  </div>

  <div class="main-content">
    <!-- 左侧：待办任务列表 -->
    <div class="tasks-panel">
      <div class="panel-header">
        <h3>
          <i class="fas fa-clipboard-list"></i>
          待办任务 
          <span class="task-count">({{ pendingTasks.length }})</span>
        </h3>
        <button class="btn btn-secondary btn-sm" (click)="loadData()" [disabled]="isLoading">
          <i class="fas fa-sync-alt" [class.fa-spin]="isLoading"></i>
          刷新
        </button>
      </div>

      <div class="task-list" *ngIf="!isLoading">
        <div 
          *ngFor="let task of pendingTasks; trackBy: trackByTaskId" 
          class="task-item"
          [class.selected]="selectedTask?.id === task.id"
          (click)="selectTask(task)">
          
          <div class="task-header">
            <div class="task-title">
              <i class="fas fa-wrench"></i>
              {{ task.repairRequest.title }}
            </div>
            <span class="priority-badge" [class]="getRepairPriorityClass(task.repairRequest.priority)">
              {{ getRepairPriorityText(task.repairRequest.priority) }}
            </span>
          </div>

          <div class="task-details">
            <div class="task-meta">
              <span class="device-info">
                <i class="fas fa-desktop"></i>
                {{ task.repairRequest.device.name }} ({{ task.repairRequest.device.serialNumber }})
              </span>
              <span class="location">
                <i class="fas fa-map-marker-alt"></i>
                {{ task.repairRequest.device.location }}
              </span>
            </div>
            
            <div class="current-step">
              <i class="fas fa-play-circle"></i>
              当前步骤：{{ getWorkflowStepText(task.currentStep) }}
            </div>
            
            <div class="task-time">
              <i class="fas fa-clock"></i>
              创建时间：{{ formatDate(task.createdAt) }}
            </div>
          </div>

          <div class="task-description">
            {{ task.repairRequest.description }}
          </div>
        </div>

        <div class="empty-state" *ngIf="pendingTasks.length === 0">
          <i class="fas fa-inbox"></i>
          <h4>暂无待办任务</h4>
          <p>当前没有需要处理的工作流任务</p>
        </div>
      </div>

      <div class="loading-state" *ngIf="isLoading">
        <i class="fas fa-spinner fa-spin"></i>
        <p>正在加载任务...</p>
      </div>
    </div>

    <!-- 右侧：任务详情和处理 -->
    <div class="task-detail-panel">
      <div *ngIf="selectedTask && selectedInstance" class="task-detail">
        <app-workflow-step 
          [workflowInstance]="selectedInstance"
          (stepCompleted)="onStepCompleted()">
        </app-workflow-step>
      </div>

      <div *ngIf="!selectedTask" class="no-selection">
        <i class="fas fa-hand-point-left"></i>
        <h4>请选择一个任务</h4>
        <p>从左侧列表中选择一个待办任务来查看详情和进行处理</p>
      </div>
    </div>
  </div>

  <!-- 底部：工作流实例概览 -->
  <div class="instances-overview" *ngIf="allInstances.length > 0">
    <div class="panel-header">
      <h3>
        <i class="fas fa-project-diagram"></i>
        工作流实例概览
      </h3>
    </div>

    <div class="instances-grid">
      <div 
        *ngFor="let instance of allInstances; trackBy: trackByInstanceId" 
        class="instance-card"
        [class]="getWorkflowStatusClass(instance.status)">
        
        <div class="instance-header">
          <div class="instance-title">
            <i class="fas fa-cog"></i>
            {{ instance.repairRequest.title }}
          </div>
          <span class="status-badge">
            {{ instance.status }}
          </span>
        </div>

        <div class="instance-details">
          <div class="device-info">
            <strong>设备：</strong>{{ instance.repairRequest.device?.name }}
          </div>
          <div class="current-step">
            <strong>当前步骤：</strong>{{ getWorkflowStepText(instance.currentStep) }}
          </div>
          <div class="created-time">
            <strong>创建时间：</strong>{{ formatDate(instance.createdAt) }}
          </div>
          <div class="completed-time" *ngIf="instance.completedAt">
            <strong>完成时间：</strong>{{ formatDate(instance.completedAt) }}
          </div>
        </div>

        <div class="instance-actions" *ngIf="instance.status === WorkflowStatus.RUNNING">
          <button class="btn btn-sm btn-outline" (click)="selectTask(instance)" *ngIf="isTaskPending(instance)">
            处理任务
          </button>
        </div>
      </div>
    </div>
  </div>
</div> 